<template>
	<view class="card">
		<u-card>
			<view class="" slot="body">
				<view class="u-body-header">
					<u-row>
						<u-col span="2">
							<view @click.stop="userClick">
								<u-avatar :src="u.avatar" size="90"></u-avatar>
							</view>
						</u-col>
						<u-col span=" 9">
							<view style="font-size: 34rpx;color: #80858B;" @click.stop="userClick">{{u.username}}</view>
							<view style="font-size: 28rpx;color: #C0C5C7;" v-if="floor>0">
								{{floor}}F
							</view>
						</u-col>
					</u-row>
				</view>
				<view class="comment">
					<u-row customStyle="margin-bottom:20rpx">
						<u-col span="2"></u-col>
						<u-col span="9">
							<view class="cmt">
								<emojiText :richString="comment.comment"></emojiText>
							</view>
						</u-col>
					</u-row>
					<u-row customStyle="padding-bottom:20rpx">
						<u-col span="2" v-if="showReply"></u-col>
						<view class="reply" @click.stop="replyClick" v-if="showReply">
							<text v-if="reply!==0">{{reply}}</text>回复 >
						</view>
						<u-col span="1"></u-col>
						<u-col span="4">
							<view class="date">
								<uni-dateformat
									:date="comment.date>new Date().getTime()?new Date().getTime():comment.date"
									:threshold="[60000,3600000]" format="MM-dd hh:mm:ss" />
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-card>
	</view>
</template>

<script>
	import emojiText from "@/components/emoji-text/emoji-text.vue"
	export default {
		name: "comment",
		components: {
			emojiText
		},
		emits: ["clickReply", "clickUser"],
		props: {
			comment: {
				type: Object,
				default: null
			},
			floor: {
				type: Number,
				default: 0
			},
			reply: {
				type: Number,
				default: 0
			},
			uid: {
				type: Number,
				default: null
			},
			getUser: {
				type: Function,
				default: () => {}
			},
			showReply: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				u: {
					username: "加载中...",
					avatar: "../../static/logo.png"
				}
			};
		},
		methods: {
			replyClick() {
				this.$emit('clickReply')
			},
			userClick() {
				this.$emit("clickUser")
			},
			getDate(stamp) {
				let date = new Date(stamp)
				let month = date.getMonth() + 1
				let day = date.getDate()
				let hour = date.getHours()
				let minute = date.getMinutes()
				let second = date.getSeconds()
				return this.add0(month) + "-" + this.add0(day) + " " +
					this.add0(hour) + ":" + this.add0(minute) + ":" + this.add0(second)
			},
			add0(m) {
				return m < 10 ? '0' + m : m
			}
		},
		mounted() {
			this.getUser(this.uid).then(res => {
				this.u = res
			})
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		padding: 20rpx 0;
	}

	.u-body-header {
		font-size: 20rpx;
		color: #333;
		padding-bottom: 20rpx;
		width: 90%;
		margin: 0 auto;

	}

	.comment {
		width: 90%;
		margin: 0 auto;
		border-bottom: 3rpx solid #E8E8E8;

		.cmt {
			font-size: 35rpx;
		}
	}

	.reply {
		background-color: #f5f5f5;
		font-size: 27rpx;
		border-radius: 21rpx;
		padding: 5rpx 20rpx;
	}

	.date {
		font-size: 27rpx;
		color: #80858B;
	}

	.u-foot {
		padding-bottom: 10px;
		display: flex;
		justify-content: center;

		.icon {
			margin: 0 60rpx;
		}
	}
</style>
